<!doctype html>

<head>
   <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="viewport" content="width=device-width, height=device-height initial-scale=1, maximum-scale=1, user-scalable=no">
   <!-- player skin -->
   <link rel="stylesheet" href="skin/skin.css">

   <!-- site specific styling -->
   <style>
   body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center;
      padding: 0px; margin: 0px;
   }

   .flowplayer { width: 100%; }
   </style>

   <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ -->
   <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

   <!-- include flowplayer -->
   <script src="flowplayer.js"></script>

</head>

<body>

   <!-- the player -->
   <div class="flowplayer" data-native_fullscreen="true" data-ratio="1.5">
      <video autoplay>
         <source type="video/webm" src="https://edge.flowplayer.org/bauhaus.webm">
         <source type="video/mp4" src="https://edge.flowplayer.org/bauhaus.mp4">
      </video>
   </div>

</body>
<script type="text/javascript">
   flowplayer.conf = {
   native_fullscreen: true
};

</script>